<template>
  <div style="display: inline-block;">
    <el-button
      size="small"
      type="primary"
      @click="exportData"
      :loading="loading"
      style="display: inline-block; margin-left: 10px; margin-right: 10px"
    >
      {{loading ? $t('common.exporting') : $t('common.export')}}
    </el-button>

    <div
      v-if="exportType !== ''"
      @click="showDrawer"
      style="
      display: inline-block;
      margin-right: 10px;
      cursor: pointer;
      padding: 1px 1px;
      border-radius: 50%;
      position: relative;
      top: 11px;
      left: -5px;
      font-size: 24px;"
    >
      <img
        :src="require('@/assets/images/export-icon.jpg')"
        alt=""
        style="width: 59px"
      >
      <template v-if="currentNum > 0">
        <el-badge :value="currentNum" class="item" style="position: absolute; top: -5px; right: 5px;">
          <!--<svg-icon icon-class="excel" />-->
        </el-badge>
      </template>
    </div>

    <el-drawer
      title="导出列表"
      :visible.sync="drawer"
      direction="rtl"
      size="700px"
    >
      <el-table :data="drawerData">
        <!--<el-table-column-->
        <!--  prop="id"-->
        <!--  label="ID"-->
        <!--  width="100"-->
        <!--  align="center"-->
        <!--&gt;-->
        <!--</el-table-column>-->
        <el-table-column
          prop="fileName"
          :label="$t('stock.file')"
          min-width="200"
        >
          <template slot-scope="{row}">
            <div class="font-blue" style="cursor: pointer" @click="download(row)">
              {{row.fileName || '-'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('table.status')"
          min-width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.status === 'fail'">
              <span class="font-red">{{row.statusStr}} <i class="el-icon-error"></i></span>
            </template>
            <template v-if="row.status === 'waiting'">
              <span class="font-blue">{{row.statusStr}} <i class="el-icon-loading"></i></span>
            </template>
            <template v-if="row.status === 'handling'">
              <span class="font-blue">{{row.statusStr}} {{row.currentNum}} / {{row.totalNum}}  <i class="el-icon-loading"></i></span>
            </template>
            <template v-if="row.status === 'success'">
              <span class="font-green">{{row.statusStr}} <i class="el-icon-success"></i></span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="isDownload"
          :label="$t('table.下载状态')"
          min-width="100"
        >
          <template slot-scope="{row}">
            <template v-if="row.isDownload === 1">
              <span class="font-green">{{ $t('table.已下载') }}</span>
            </template>
            <template v-else>
              <span class="font-red">{{ $t('table.未下载') }}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

  </div>
</template>

<script>
import {deepCopy} from "@/utils";
import {EventBus} from "@/utils/eventBus";
import {download, getExportList} from "@/api/exportExcel";

export default {
  name: "ExportButton",
  props:{
    queryParams:{
    },
    func:{
      type: Function,
      required: true,
    },
    exportType:{
      type: String,
      default: '',
    },
    getTotal:{
      type: Number,
      default: 0,
    },
  },
  computed: {
    isInterval(){
      return this.drawerData.some(item=>{
        if(item.status === 'waiting' || item.status === 'handling'){
          return true
        }
        return false
      })
    },
  },
  watch:{
    loading(){
      if(this.loading){
        this.buttonText = this.$t('common.exporting')
      }else{
        this.buttonText = this.$t('common.export')
      }
    }
  },
  data(){
    return {
      loading: false,
      buttonText: this.$t('common.export'),
      currentNum: 0,
      drawer: false,
      drawerData: [],
      exportQueryParams: {
        page: 1,
        pageSize: 30,
        exportType: '',
      },
      exportLoading: false,
      total: 0,
      interval: null,
    }
  },
  created() {
    EventBus.$on('showExportDraw',(msg)=>{
      this.showDrawer()
    })
    this.interval = setInterval(()=>{
      // 请求数量 但没有loading效果
      if(this.isInterval && this.drawer){
        getExportList(this.exportQueryParams)
          .then(res=>{
            this.setData(res)
          })
      }
    },1500)
    this.getData()
  },
  methods:{
    exportData(){
      if (this.getTotal <= 0) {
        this.$errorMessage('请等数据加载完毕后再导出')
        return false
      }
      if (this.getTotal > 5000) {
        this.$errorMessage('数据量过大，请筛选后再导出')
        return false
      }
      let exportParams = this.queryParams
      const params = {}
      if(typeof this.queryParams === 'object'){
        exportParams = deepCopy(this.queryParams)
        exportParams.page = 1;
        exportParams.pageSize = 300000;
        exportParams.export = 1;
      }else{
        params.export = 1
      }
      this.loading = true
      this.buttonText = this.$t('common.exporting')
      this.func(exportParams, params)
        .then(res=>{
          this.loading = false
          this.buttonText = this.$t('common.export')
          if(res.error === 0){
            if(res.data.excelPath){
              window.open(res.data.excelPath,"_blank");
            }else{
              EventBus.$emit('showExportDraw')
            }

          }
        })
    },

    showDrawer() {
      this.drawer = true
      this.exportQueryParams.page = 1;
      this.exportQueryParams.exportType = this.exportType;
      this.getData()
    },
    getData(){
      this.exportLoading = true
      this.exportQueryParams.exportType = this.exportType;
      getExportList(this.exportQueryParams)
        .then(res=>{
          this.exportLoading = false
          this.setData(res)
        })
    },
    setData(res){
      this.drawerData = res.data
      this.total = res.info.total
      this.currentNum = res.info.tipsNum
    },
    // 下载文件
    download(row){
      if(!row.excelPath){
        return
      }
      this.currentNum--;
      window.open(row.excelPath,"_blank");
      download(row.id)
      row.isDownload = 1;
    }
  },
  beforeDestroy() {
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
}
</script>

<style scoped>

</style>
